<template>
  <div class="community-detail" v-loading="loading">
    <!-- 头部 -->
    <div class="detail-header">
      <div class="container">
        <div class="breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/community' }">旅行社区</el-breadcrumb-item>
            <el-breadcrumb-item>动态详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </div>

    <!-- 主内容 -->
    <div class="container">
      <div class="detail-layout">
        <!-- 左侧内容 -->
        <article class="post-content">
          <!-- 作者信息 -->
          <div class="author-section">
            <img
              :src="post.author?.avatar"
              :alt="post.author?.name"
              class="author-avatar"
              @click="goToUserProfile(post.author?.id)"
            />
            <div class="author-info" @click="goToUserProfile(post.author?.id)">
              <div class="author-name">{{ post.author?.name }}</div>
              <div class="post-meta">
                <span class="post-time">{{ post.time }}</span>
                <span v-if="post.location" class="post-location">
                  <el-icon><Location /></el-icon>
                  {{ post.location }}
                </span>
              </div>
            </div>
            <el-button type="primary" class="follow-btn">+ 关注</el-button>
          </div>

          <!-- 标题 -->
          <h1 v-if="post.title" class="post-title">{{ post.title }}</h1>

          <!-- 正文 -->
          <div class="post-body">
            <p class="post-text">{{ post.content }}</p>
            
            <!-- 图片展示 -->
            <div v-if="post.images?.length" class="post-images">
              <img
                v-for="(img, index) in post.images"
                :key="index"
                :src="img"
                :alt="`图片${index + 1}`"
                class="post-image"
              />
            </div>
          </div>

          <!-- 标签 -->
          <div class="tags-section" v-if="post.tags?.length">
            <el-tag v-for="tag in post.tags" :key="tag" class="tag-item">
              #{{ tag }}
            </el-tag>
          </div>

          <!-- 互动栏 -->
          <div class="action-bar">
            <el-button
              :icon="Star"
              :type="post.isLiked ? 'primary' : 'default'"
              @click="handleLike"
            >
              {{ post.isLiked ? '已点赞' : '点赞' }} ({{ post.likes }})
            </el-button>
            <el-button :icon="Collection">收藏</el-button>
            <el-button :icon="Share">分享</el-button>
          </div>

          <!-- 评论区 -->
          <CommentSection
            :comments="comments"
            :total-comments="post.comments"
            @submit="handleComment"
            @reply="handleReply"
            @like="handleLikeComment"
          />
        </article>

        <!-- 右侧边栏 -->
        <aside class="sidebar">
          <!-- 作者卡片 -->
          <div class="sidebar-card author-card">
            <img :src="post.author?.avatar" :alt="post.author?.name" class="author-avatar-large" />
            <h3 class="author-name-large">{{ post.author?.name }}</h3>
            <p class="author-bio">{{ post.author?.bio || '这个人很懒，什么都没留下' }}</p>
            <div class="author-stats">
              <div class="stat">
                <div class="stat-value">{{ post.author?.posts || 0 }}</div>
                <div class="stat-label">动态</div>
              </div>
              <div class="stat">
                <div class="stat-value">{{ post.author?.followers || 0 }}</div>
                <div class="stat-label">粉丝</div>
              </div>
            </div>
            <el-button type="primary" class="follow-btn-large">关注</el-button>
          </div>

          <!-- 相关动态 -->
          <div class="sidebar-card">
            <h3 class="card-title">相关动态</h3>
            <div class="related-posts">
              <div
                v-for="item in relatedPosts"
                :key="item.id"
                class="related-card"
                @click="goToPost(item.id)"
              >
                <div class="related-cover">
                  <img :src="item.cover" :alt="item.title" />
                </div>
                <h4 class="related-title">{{ item.title }}</h4>
                <div class="related-meta">
                  <el-icon><View /></el-icon>
                  {{ item.views }}
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Location, Star, Collection, Share, View } from '@element-plus/icons-vue'
import CommentSection from '@/components/common/CommentSection.vue'
// import { getCommunityDetail, likePost, addPostComment } from '@/api/travel/index.js'

const route = useRoute()
const router = useRouter()

const loading = ref(false)

// 动态详情
const post = ref({
  id: '',
  title: '',
  content: '',
  images: [],
  author: {
    name: '',
    avatar: '',
    bio: '',
    posts: 0,
    followers: 0
  },
  time: '',
  location: '',
  likes: 0,
  comments: 0,
  isLiked: false,
  tags: []
})

// 评论列表
const comments = ref([
  {
    id: 1,
    user: {
      name: '旅行爱好者',
      avatar: 'https://i.pravatar.cc/150?img=51'
    },
    content: '照片拍得太美了！请问用的什么相机？',
    time: '1小时前',
    likes: 15,
    isLiked: false
  },
  {
    id: 2,
    user: {
      name: '摄影师小王',
      avatar: 'https://i.pravatar.cc/150?img=52'
    },
    content: '这个角度太棒了！下次我也要去打卡',
    time: '3小时前',
    likes: 8,
    isLiked: false
  }
])

// 相关动态
const relatedPosts = ref([
  {
    id: 2,
    title: '桂林山水甲天下',
    cover: 'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=400&q=80',
    views: '2.1k'
  },
  {
    id: 3,
    title: '成都美食打卡',
    cover: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=400&q=80',
    views: '3.4k'
  },
  {
    id: 4,
    title: '西藏自驾游',
    cover: 'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=400&q=80',
    views: '1.8k'
  }
])

// 加载动态详情
const loadPostDetail = async () => {
  loading.value = true
  try {
    const postId = route.params.id
    
    // TODO: 调用API
    // const res = await getCommunityDetail(postId)
    // post.value = res.data
    
    // 模拟数据
    post.value = {
      id: postId,
      title: '川西秘境 | 一场说走就走的自驾之旅',
      content: `从成都出发，沿着318国道一路向西，经过康定、新都桥、稻城亚丁...每一处风景都让人流连忘返。

特别是清晨的新都桥，云雾缭绕，美得像一幅画。站在山顶俯瞰，整个山谷都笼罩在薄雾之中，远处的雪山若隐若现，近处的藏式民居炊烟袅袅。

这次旅行最大的收获不仅是看到了美景，更是体会到了在路上的那种自由和释放。每一个转弯都是惊喜，每一次停留都是故事。

如果你也想来一场说走就走的旅行，川西绝对是不二之选。记得带上相机，这里的每一帧都值得记录。`,
      images: [
        'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&q=80',
        'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=800&q=80',
        'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=800&q=80'
      ],
      author: {
        id: '31',
        name: '旅行摄影师小明',
        avatar: 'https://i.pravatar.cc/150?img=31',
        bio: '用镜头记录世界，用脚步丈量人生',
        posts: 156,
        followers: 8520
      },
      time: '2024-01-20 10:30',
      location: '四川·稻城亚丁',
      likes: 1234,
      comments: 89,
      isLiked: false,
      tags: ['川西', '自驾游', '摄影', '稻城亚丁']
    }
  } catch (error) {
    console.error('加载失败:', error)
    ElMessage.error('加载失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 点赞
const handleLike = async () => {
  try {
    // TODO: 调用API
    // await likePost(post.value.id)
    
    post.value.isLiked = !post.value.isLiked
    post.value.likes += post.value.isLiked ? 1 : -1
    ElMessage.success(post.value.isLiked ? '点赞成功' : '取消点赞')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 发表评论
const handleComment = async (content) => {
  try {
    // TODO: 调用API
    // await addPostComment({
    //   postId: post.value.id,
    //   content: content
    // })
    
    comments.value.unshift({
      id: Date.now(),
      user: {
        name: '当前用户',
        avatar: 'https://i.pravatar.cc/150?img=50'
      },
      content: content,
      time: '刚刚',
      likes: 0,
      isLiked: false
    })
    post.value.comments++
  } catch (error) {
    throw error
  }
}

// 回复评论
const handleReply = (comment) => {
  console.log('回复评论:', comment)
}

// 点赞评论
const handleLikeComment = (comment) => {
  comment.isLiked = !comment.isLiked
  comment.likes += comment.isLiked ? 1 : -1
  ElMessage.success(comment.isLiked ? '点赞成功' : '取消点赞')
}

// 跳转到其他动态
const goToPost = (id) => {
  router.push(`/community/${id}`)
}

// 跳转到用户主页
const goToUserProfile = (userId) => {
  if (userId) {
    const profileUrl = window.location.origin + `/user/profile/${userId}`
    window.open(profileUrl, '_blank')
  }
}

// 监听路由参数变化
watch(() => route.params.id, (newId) => {
  if (newId) {
    loadPostDetail()
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }
})

onMounted(() => {
  loadPostDetail()
})
</script>

<style scoped lang="less">
.community-detail {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 80px;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

// 头部
.detail-header {
  background: #fff;
  padding: 32px 0 24px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.breadcrumb {
  :deep(.el-breadcrumb) {
    font-size: 14px;
  }
}

// 布局
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
}

// 文章内容
.post-content {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

// 作者信息
.author-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 24px;

  .author-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }
  }

  .author-info {
    flex: 1;
    cursor: pointer;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }

    .author-name {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 6px;
    }

    .post-meta {
      display: flex;
      align-items: center;
      gap: 16px;
      font-size: 14px;
      color: #999;

      .post-location {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #ff6b6b;
      }
    }
  }

  .follow-btn {
    flex-shrink: 0;
  }
}

// 标题
.post-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 24px 0;
  line-height: 1.4;
}

// 正文
.post-body {
  margin-bottom: 32px;

  .post-text {
    font-size: 16px;
    color: #333;
    line-height: 1.8;
    margin: 0 0 24px 0;
    white-space: pre-wrap;
  }

  .post-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
    margin-bottom: 24px;

    .post-image {
      width: 100%;
      border-radius: 12px;
      object-fit: cover;
      cursor: pointer;
      transition: transform 0.3s;

      &:hover {
        transform: scale(1.02);
      }
    }
  }
}

// 标签
.tags-section {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #f0f0f0;

  .tag-item {
    font-size: 14px;
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
    border: none;
  }
}

// 互动栏
.action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #f0f0f0;
}

// 侧边栏
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

// 作者卡片
.author-card {
  text-align: center;
}

.author-avatar-large {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 16px;
}

.author-name-large {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 8px 0;
}

.author-bio {
  font-size: 13px;
  color: #999;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.author-stats {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;

  .stat {
    text-align: center;

    .stat-value {
      font-size: 20px;
      font-weight: 700;
      color: #ff6b6b;
      margin-bottom: 4px;
    }

    .stat-label {
      font-size: 13px;
      color: #999;
    }
  }
}

.follow-btn-large {
  width: 100%;
}

// 相关动态
.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

.related-posts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.related-card {
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 8px;
  overflow: hidden;
  background: #f8f9fa;

  &:hover {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
}

.related-cover {
  width: 100%;
  height: 120px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }
}

.related-card:hover .related-cover img {
  transform: scale(1.05);
}

.related-title {
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  padding: 12px 12px 8px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #999;
  padding: 0 12px 12px;
}

// 响应式
@media (max-width: 1200px) {
  .detail-layout {
    grid-template-columns: 1fr;
  }

  .sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .post-title {
    font-size: 24px;
  }

  .author-section {
    flex-wrap: wrap;
  }

  .post-content {
    padding: 24px 20px;
  }

  .sidebar {
    grid-template-columns: 1fr;
  }

  .post-images {
    grid-template-columns: 1fr;
  }
}
</style>
